<template>
	<view class="nav-bar" :style="{height: `${navBarHeight}px`, 'padding-top': `${statusBarHeight}px`}">
		<view class="btn-back" @click="goBack">
			<image class="ic-back" src="../static/ic_back.png" mode="widthFix"></image>
			<text class="nav-title">{{title}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		props: ['title'],
		data() {
			
		},
		computed: {
			navBarHeight() {
				return this.$store.state.navBarHeight;
			},
			statusBarHeight() {
				return this.$store.state.statusBarHeight;
			}
		},
		methods: {
			goBack() {
				uni.navigateBack();
			}
		}
	}
</script>

<style>
	.nav-bar {
		z-index: 2;
		/* background-color: red; */
		width: 100vw;
		font-family: "yshst" !important;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding-left: 10rpx;
		padding-right: 10rpx;
		box-sizing: border-box;
	}
	.btn-back {
		padding: 15rpx 15rpx;
		display: flex;
		align-items: center;
		/* background-color: aqua; */
	}
	.nav-title {
		margin-left: 35rpx;
		font-size: 35rpx;
		font-family: "yshst" !important;
	}
	.ic-back {
		width: 16rpx;
		height: 16rpx;
	}
</style>